<template>
  <div id="index">
      <header>
          <section>
              <i class="iconfont icon-wangyiyunyinle"></i>
              <div class="bb" @click="btn"><span>退出登录</span></div>
          </section>
          <nav>
              <ul>
                  <router-link tag="li" to="/recommend">推荐音乐</router-link>
                  <router-link tag="li" to="/hot">热歌榜</router-link>
                  <router-link tag="li" to="/search">搜索</router-link>
              </ul>
          </nav>
      </header>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
   methods:{
       btn(){
           this._axios.get('/logout').then((res)=>{
              if( res.data.code===200) return this.$router.push({name:'login'})
           })
           
       }
   }
  }
</script>

<style lang='scss' scoped>
   #index{
       header{
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 100;
          section{
              height: _vw(152);
              line-height: _vw(152);
              background-color: #d43c33;
              position: relative;
              i{
                  color: #fff;
                  margin-left: _vw(30);
                  font-size: _vw(60);
              }
             .bb{
                 width: _vw(150);
                 display: inline-block;
                 margin-left: _vw(200);
                 span{
                     border: 1px solid skyblue;
                     background-color: #fff;
                     padding: _vw(10);
                     margin-bottom: _vw(10);
                     border-radius: _vw(30) ;
                 }
             }
              
          }
          nav{
               ul{
                   display: flex;
                  justify-content: space-around;
                  border-bottom: 1px solid #c1c1c1 ;
                  background-color: #fff;
                   li{
                   height: _vw(70);
                   line-height: _vw(70);
                   &.active{
                       color: red;
                   }
                   }
               }
          }
       }
   }
</style>